<template>
    <view class="calendar">
        <!-- 头部 -->
        <view class="header">
            <button @click="preMonth" class="nav-btn">上一月</button>
            <text class="yearMonth"> {{currentYear}} 年 {{monthNames[currentMonth]}} </text>
            <button @click="nextMonth" class="nav-btn">下一月</button>
        </view>
        <!-- 周 -->
        <view class="weekdays">
            <view class="weekday" v-for="day in weekDays" :key="day">{{day}}</view>
        </view>
        <!-- 天 -->
        <view class="dates-grid">
            <view class="date" v-for="(date, index) in datesInMonth" :key="index" 
               @click="selectDate(date, index)"
                 :class="{
                    'empty': !date,
                    'hightlighted-row': Math.floor(index /7) == selectedRowIndex,
                    'selected': date == selectedDate
                 }">
                <text v-if="date">{{date}}</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed} from 'vue'

const dateObj = new Date();
const currentDate = ref(dateObj)
const currentMonth = ref(dateObj.getMonth())
const currentYear = ref(dateObj.getFullYear())

const selectedDate = ref()
const selectedRowIndex = ref()
const monthNames = ref<string[]>(['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'])
const weekDays = ref<string[]>(['日','一','二','三','四','五','六'])


const datesInMonth = computed(()=>{
    const firstDay = new Date(currentYear.value, currentMonth.value, 1)
    const lastDay = new Date(currentYear.value, currentMonth.value + 1, 0)
    const dates = []
    for(let i = 0; i < firstDay.getDay(); i++){
        dates.push('')
    }
    for(let i = 1; i <= lastDay.getDate(); i++){
        dates.push(i)
    }
    return dates;
})


// 选择日期
function selectDate(date: any, index: number){
  if(date){
     selectedDate.value = date
     selectedRowIndex.value = Math.floor(index / 7)
  }

  console.log(`${currentYear.value}-${currentMonth.value}-${selectedDate.value}`)
}

// 上个月
function preMonth(){
  currentMonth.value -=  1
  if(currentMonth.value < 0){
      currentMonth.value = 11
      currentYear.value -= 1
  }
  resetSelection()
}

// 下个月
function nextMonth(){
   currentMonth.value +=  1
  if(currentMonth.value > 11){
      currentMonth.value = 0
      currentYear.value += 1
  }
  resetSelection()
}

function resetSelection(){
  selectedDate.value = null 
  selectedRowIndex.value = null
}
</script>
<style scoped>
*{
     box-sizing: border-box;
     width: 100%;
}

.calendar{
    /* background-color: white; */
    background-color: #e6e9ef;
    margin: 15px auto;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 2px;;
}

.header .yearMonth{
    font-size: 18px;
    font-weight: 600;
    color: #646e83;
}

.nav-btn{
    background: none;
    font-size: 15px;
    width: 115px;
    height: 45px;
    line-height: 45px;
    background-color: white;
    color: #185ff3;
    cursor: pointer;
    padding: 0 10px;
    border: 1px solid #e0e7ec;
    border-radius: 10px;
}

/* .nav-btn:hover{
    color: #fff;
    background-color: #e0e7ec;
} */

/* weeks */
.weekdays{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    color: #646e83;
    margin-bottom: 10px;
}

.weekday{
    padding: 8px 0;
}

/* days */
.dates-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.date{
   /* padding: 10px; */
   text-align: center;
   position: relative;
   font-size: 20px;
   color: rgb(127, 123, 123);
   font-weight: 500;
   cursor: pointer;
   height: 45px;
   line-height: 45px;
   border-radius: 10px; 
}

.date.empty{
    visibility: hidden;
}

.date.hightlighted-row{
    background-color: #fff;
}

.date.selected{
    color: #fff;
    font-weight: bold;
    background-color: #185ff3;
}
</style>
